/*
 * @Description: 
 * @Autor: zhangbing
 * @Date: 2021-07-28 18:10:04
 * @LastEditors: zhangbing
 * @LastEditTime: 2021-07-28 18:56:40
 */

export default {
    // bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
    bind(el, binding) {
        console.log('bind');
        // console.log(el); // el: 指令所绑定的元素，可以用来直接操作 DOM，就是放置指令的那个元素。
        // console.log(binding); // binding: 一个对象，里面包含了几个属性，里面的value属性就是我们传的几个参数

        const _ops = binding.value
        const _c = el.getElementsByClassName(_ops.className)
        console.log('_c_bind',_c);

        _c[_ops.curIdx].className += ` ${_ops.activeClass}`
    },

    update(el, binding) {
        // update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。
        console.log('update');

        const _ops = binding.value
        const _oldOps = binding.oldValue
        console.log(_oldOps);
        const _c = el.getElementsByClassName(_ops.className);
        console.log(_c);

        _c[_oldOps.curIdx].className = `${_oldOps.className}`
        _c[_ops.curIdx].className += ` ${_ops.activeClass}`
    }
}
